<template>
	<view class="container">
		<view class="banner">
			<image src="https://z3.ax1x.com/2021/09/17/4uR1IO.jpg" mode="" class="bg"></image>
		</view>

		<view class="content">


			<view class="entrance">

				<view class="d-flex flex-column w-100" style="height: 200rpx;">
					<view class="d-flex align-items-center bg-white" v-for="(item, index) in packages" :key="index"
						@tap="pay(item.id)">
						<image src="../../static/images/register/医生.png"
							style="width: 120rpx; height: 140rpx; margin-left: 60rpx; border: 1rpx solid #E2E2E2; border-radius: 15rpx;">
						</image>
						<view class="d-flex flex-fill flex-column " style="height: 200rpx; margin: auto 50rpx; ">
							<view style="line-height:120rpx; color: #000000; font-size: 35rpx;">{{ item.name }}</view>
							<view class="font-size-sm text-color-base">{{keshiname}}/{{ item.position }}</view>
						</view>
					</view>
				</view>

				<view class="week-box">

					<view class="week-ym">
						<text class="ym-text">{{y}}</text>
					</view>

					<view class="category-list">
						<view class="category" v-for="(row, index) in check" :key="index">

							<view class="week">
								{{row.week}}
							</view>
							<view class="text" :class="index == active ? 'active' : ''" @tap="change(index)">{{ row.d }}
							</view>
						</view>
					</view>

				</view>

				<view class="jiesao" v-show="flag">
					<date-time :startTime="startTime" :endTime="endTime" :disableTime="disableTime" :time="time"
						@textChange="textChange" @touchstart="open()"></date-time>
				</view>

				<view class="tishi">
					<view v-show="!flag">该医生今天无值班</view>
				</view>


			</view>
		</view>

		<popup-layer direction="top" :show-pop="cartPopupVisible" class="cart-popup">
			<template slot="content">
				<view class="top">
					<view class="d-flex flex-column w-100" style="height: 200rpx; border: #E2E2E2 solid 1rpx;">
						<view class="d-flex align-items-center bg-white" v-for="(item, index) in packages" :key="index"
							@tap="pay(item.id)">
							<image src="../../static/images/register/doctor.png"
								style="width: 120rpx; height: 140rpx; margin-left: 60rpx; border: 1rpx solid #E2E2E2; border-radius: 15rpx;">
							</image>
							<view class="d-flex flex-fill flex-column " style="height: 200rpx; margin: auto 50rpx; ">
								<view style="line-height:90rpx; color: #000000; font-size: 35rpx;">医师：{{ item.name }}
								</view>
								<view class="font-size-sm text-color-base" style="font-size: 30rpx;">科室：{{keshiname}}
								</view>
								<view class="font-size-sm text-color-base" style="font-size: 30rpx;">
									费用：{{item.registrationFee}}</view>
								<view class="font-size-sm text-color-base" style="font-size: 30rpx;">时段：{{y}}  {{time}}</view>
							</view>
						</view>
					</view>
					<view>
						<view class="text-color-base"
							style="font-size: 30rpx; color: #000000; margin:20rpx 0rpx 0rpx 60rpx;">{{tishi}}</view>
						<view class="text-color-base"
							style="font-size: 26rpx; color: #919293; margin:20rpx 0rpx 0rpx 60rpx;" v-show="cc">
							{{username}}:{{userId}}</view>

						<view class="tianbingren">
							<view class="bingren" v-for="(row, index) in jiuzhenren" :key="index"
								@tap="toCategory(index)">
								<view  class="bingrenbg1" :class="index == count ? 'bingrenbg2' : ''" @tap="tose(index)">{{ row.name }}</view>
							</view>
							<image src="../../static/images/attendance/tianjia.png" class="addjiuzheren" @tap="toadd()"></image>

						</view>



						<button class="btn" @tap="btn()">确认挂号</button>
					</view>


				</view>

			</template>
		</popup-layer>

	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,

	} from 'vuex'
	import dateTime from '@//components/week-time/dateTime.vue'
	import popupLayer from '@/components/popup-layer/popup-layer'
	import mm from '../../api/member.js'

	export default {
		components: {
			dateTime,
			popupLayer
		},
		data() {
			return {
				y: '',
				check: [],
				active: 0,
				count: 0,
				yuanquid: 0,
				doctorid: 0,
				keshiname: "",
				packages: [],
				doctorname:'',
				primaryDate: {
					start: null,
					end: null
				},
				tishi:"请选择就诊人",
				cc:true,
				disableTime: [
					// { 'startTime': '2：00~3：00', 'endTime': '3：00~4：00' },
					// { 'startTime': '13：00', 'endTime': '14：00' }
				],
				startTime: '09：00~10：00',
				endTime: '17：00~18：00',
				time: "",
				jiuzhenren: [],
				cartPopupVisible: false,
				flag: true,
				userId: '',
				username: '',
				phone:0,
				moeny:0,
			}

		},
		onLoad(option) {
			console.log(option)
			this.doctorid = option.id
			this.keshiname = option.keshiname;
			this.getTimeandWeek()
			this.y = this.check[0].date;
			this.getDoctor()
		},
		onShow() {
			this.getjiuzhenren();
		},
		components: {

		},
		computed: {

		},
		methods: {
			getTimeandWeek() {
				//获取当前时间
				var now = new Date();
				//往后几天就循环几次
				for (let i = 1; i < 8; i++) {
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;

					var day = date.getDate();
					var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var weekDay = ['周天', '周一', '周二', '周三', '周四', '周五', '周六'];
					//把七天的时间和星期添加到数组中
					this.check.push({
						date: year + '-' + month + '-' + day,
						d: day,
						week: weekDay[dt2.getDay()],
						checked: false
					});
				}
			},
			change(d) {
				console.log(this.check[d].date)
				this.y = this.check[d].date;
				this.active = d;
				this.getDoctorTime();
			},
			tose(d) {
				this.count = d;
			},
			getDoctor() {

				var data = {
					info: JSON.stringify({

						"id": this.doctorid
					})
				};
				this.$api.getiddoctor(data).then(res => {

					console.log('查到的数据:' + JSON.stringify(res));
					this.packages = res
					this.doctorname=this.packages[0].name;
					console.log(this.packages)


				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});

				})
			},
			getDoctorTime() {
				var data = {
					info: JSON.stringify({

						"id": this.doctorid,
						"date": this.y
					})
				};
				this.$api.getDoctorTime(data).then(res => {

					console.log('查到的数据:' + JSON.stringify(res));
					if (res) {
						this.flag = false
					} else {
						this.flag = true;

					}


				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});

				})
			},
			getjiuzhenren() {
				var data = {
					info: JSON.stringify({

						"openid": mm.openid
					})
				};
				this.$api.getjiuzhenren(data).then(res => {

					console.log('查到的数据:' + JSON.stringify(res));
					if(res[0].card==null){
						this.tishi="请添加就诊人";
						this.cc=false;
						console.log("jinlailou");
					}else{
						for (var i = 0; i < res.length; i++) {
						
							if (res[i].card !=null) {
								this.jiuzhenren[i]=res[i];
							}
						
						}
						
						this.cc=true;
					if (this.jiuzhenren.length == 1) {
						this.userId = this.jiuzhenren[0].card;
						this.username = this.jiuzhenren[0].name;
						this.phone=this.jiuzhenren[0].telephone;
					} else {
						for (var i = 0; i < this.jiuzhenren.length; i++) {

							if (this.jiuzhenren[i].thepatient == 1) {
								this.userId = this.jiuzhenren[i].card;
								this.username = this.jiuzhenren[i].name;
								this.phone=this.jiuzhenren[i].telephone;
							}else{
								this.userId = this.jiuzhenren[0].card;
								this.username = this.jiuzhenren[0].name;
								this.phone=this.jiuzhenren[0].telephone;
							}

						}
					}
					}

				}).catch(err => {
					// 登录失败
					uni.hideLoading()
					uni.showToast({
						title: '查找失败',
						icon: 'none'
					});

				})
			},
			// 根据index拿到选择的就诊人
			toCategory(index) {
				this.userId = this.jiuzhenren[index].card;
				this.username = this.jiuzhenren[index].name;
				this.phone=this.jiuzhenren[index].telephone;
			},

			open() { //打开/关闭购物车列表popup
				// this.cartPopupVisible = !this.cartPopupVisible
				// this.textChange();
				if (this.cartPopupVisible) {
					this.getjiuzhenren()
				}
			},
			textChange(e) {
				console.log('父组件的自定义事件被触发')
				console.log(e)
				this.time =e;
				
				this.cartPopupVisible = !this.cartPopupVisible
			},
			toadd(){
				uni.navigateTo({
					url:'/pages/addjiuzhenren/add'
				})
			},
			btn() {

				uni.setStorage({
					key: 'jiuzhenxinxi',
					data: {
						"keshiname": this.keshiname,
						"yishengid": this.doctorid,
						"yishengname":this.doctorname,
						"yuanquid": this.yuanquid,
						"jiuzhenriqi": this.y,
						"jiuzhenshiduan": this.time,
						"jiuzhenname": this.username,
						"jiuzhenkahao": this.userId,
						"phone":this.phone,
						"moeny":this.packages[0].registrationFee,
						"position":this.packages[0].position,
					},
					success: function() {
						
						console.log(1111)


						uni.navigateTo({
							url:'/pages/appointment/zhifu'
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.week-box {
		background: #FFFFFF;
		color: #888;
		font-size: 24rpx;
		box-shadow: 0 0 10rpx #e6e6e6;
	}

	.week-ym {
		margin-bottom: 50rpx;
		font-size: 30rpx;
		line-height: 72rpx;
		/* border-bottom: 2rpx solid #dadada; */

		border-bottom: #E2E2E2 solid 1rpx;
	}

	.ym-text {
		margin-left: 60rpx;
	}

	.week {
		color: #999999;
	}

	.guahao {
		/* margin-right:5rpx ; */
		background-color: #FFA500;
		width: 110rpx;
		height: 40rpx;
		border-radius: 25rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yuhao {
		font-size: 28rpx;
	}

	.tishi {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #919293;
	}

	.active {
		border: 4rpx solid #00ce88;
		border-radius: 50%;
		color: #00ce88;
		font-size: 30upx;
	}

	.text {
		margin: 20upx auto 0upx auto;
		width: 40rpx;
		height: 40rpx;
		font-size: 30upx;
		color: #3c3c3c;

	}

	.category {
		margin: auto;
	}

	.category-list {
		width: 100%;

		padding: 0 0 30upx 0;

		display: flex;
		text-align: center;
		border-bottom: #E2E2E2 solid 1rpx;
	}


	.tianbingren {
		width: 98%;
		margin-left: 40rpx;
		padding: 0 0 30upx 0;
		// border-bottom: solid 2upx #f6f6f6;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;

		.bingren {
			width: 95rpx;
			height: 95rpx;
			margin: auto 10rpx;
			// margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

		}

		.bingrenbg1 {
			width: 95rpx;
			height: 95rpx;
			// background-color: #3ECEB6;
			border: #3ECEB6 solid 1rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			font-size: 24upx;
			color: #3ECEB6;
			text-align: center;

			align-items: center;
		}

		.bingrenbg2 {
			width: 95rpx;
			height: 95rpx;
			background-color: #3ECEB6;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			font-size: 24upx;
			color: #FFFFFF;
			text-align: center;

			align-items: center;
		}

		.addjiuzheren {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			// margin-top: 60rpx;
			margin-top: 10rpx;
			margin-left: 5rpx;
		}
	}


	.btn {
		width: 100%;
		border-radius: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #3ECEB6;
		color: #FFFFFF;
		height: 80rpx;
	}


	.banner {
		position: relative;
		width: 100%;
		height: 600rpx;

		.bg {
			width: 100%;
			height: 300rpx;
		}
	}

	.entrance {
		position: relative;
		margin-top: -370rpx;
		margin-bottom: 30rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx 0;

		// display: flex;
		// align-items: center;
		// justify-content: center;


		.tb {
			position: relative;
			margin-left: 40rpx;
			margin-top: 20rpx;

			.tb1 {

				width: 100rpx;
				height: 100rpx;
			}


		}



	}
</style>
